<template>
  <view class="page">
    <view class="logo">
      <image class="img" src="/static/logo2.png" mode="widthFix" />
    </view>

    <view class="get-code-btn" @click="loginByCode">手机号登录</view>
    <!-- 未同意隐私条款的点击盒子  -->
    <!-- <view class="mock-phone-btn" v-if="!isAgree" @click="getPhoneNumber"></view>
    <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="get-phone-btn">快速登录</button> -->

    <button class="get-phone-btn" @click="quickLogin">快速登录</button>

    <view class="get-home-btn" @click="goBackHome">返回首页</view>

    <view class="uni-list">
      <view class="check_radio">
        <!-- <image class="border" :src="STATIC_IMG_URL + 'login/radio_border.png'" mode="aspectFit" />
        <image v-show="isAgree" class="spot" :src="STATIC_IMG_URL + 'login/radio_spot.png'" mode="aspectFit" /> -->
        <view class="border"></view>
        <image v-show="isAgree" class="spot" src="/static/icon/select.png" mode="aspectFit" />
        <view class="mock_check_btn" @click="radioChange"></view>
      </view>
      <view class="radioName">
        <text>我已阅读并同意</text>
        <text class="link" @click.stop="goTermsService('服务条款')">《服务条款》</text>
        <text>和</text>
        <text class="link" @click.stop="goTermsService('隐私条款')">《隐私条款》</text>
        <text>，未注册用户可一键注册登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  // import { STATIC_IMG_URL } from '../../config/config';
  // import { login, getUserInfo } from '../../apis/pages';
  import { onLoad } from '@dcloudio/uni-app';
  import { loginRedirect } from '../../utils/loginHooks';
  import { wxLogin } from '../../apis/pages';
  import { useUserStore } from '../../store/user';

  const userStore = useUserStore();
  const isAgree = ref(false);
  const reUrl = ref('');

  onLoad((option) => {
    // if (option.reUrl) {
    // 解码两次  直接获取页面fullpath  参数会被先encode一次
    // reUrl.value = decodeURIComponent(decodeURIComponent(option.reUrl));
    // console.log('reUrl >>>', reUrl.value);
    // }
  });

  function radioChange() {
    isAgree.value = !isAgree.value;
  }

  // 不授权手机号的快速登录
  function quickLogin() {
    if (!isAgree.value) {
      uni.showToast({
        title: '请同意服务条款',
        icon: 'error',
      });
      return;
    }

    getWechatCode().then((code) => {
      console.log(' 111code >>>>>>', code);
      wxLogin({
        wxAvatar: '1', // 必传
        wxNickname: '微信用户', // 必传
        source: 1,
        code: code,
      }).then((loginRes) => {
        userStore.setToken(loginRes.token);
        userStore.setUserInfo(loginRes);
        loginRedirect();
      
      });
    });
  }

  // 获取微信小程序code
  function getWechatCode() {
    return new Promise((resolve, reject) => {
      uni.login({
        provider: 'weixin', // 指定微信登录
        success(res) {
          if (res.code) {
            resolve(res.code); // 返回微信登录 code
          } else {
            reject(new Error('获取微信 code 失败：' + res.errMsg));
          }
        },
        fail(err) {
          reject(new Error('微信登录失败：' + err.errMsg));
        },
      });
    });
  }

  // 手机号授权一键登录
  function getPhoneNumber(e) {
    if (!isAgree.value) {
      uni.showToast({
        title: '请同意服务条款',
        icon: 'error',
      });
      return;
    }

    if (!e.detail.code) {
      // 拒绝授权
      uni.showToast({
        title: '请同意授权',
        icon: 'error',
      });
    } else {
      // 同意授权

      console.log(e, 'e >>>>>');
      const { code } = e.detail;
      // 获取openid
      uni.login({
        provider: 'weixin',
        success: async (res) => {
          wxLogin({
            wxAvatar: '1', // 必传
            wxNickname: '微信用户', // 必传
            source: 1,
            code: res.code,
          }).then((loginRes) => {
            console.log(loginRes, 'loginRes >>>>>>');
          });
        },
      });
    }
  }

  function goTermsService(name) {
    uni.navigateTo({
      url: '/pagesB/termsOfService/termsOfService?name=' + encodeURIComponent(name),
    });
  }

  // 返回首页
  function goBackHome() {
    uni.switchTab({
      url: '/pages/index/index',
    });
  }

  // 去验证码登录页
  function loginByCode() {
    uni.navigateTo({
      url: '/pagesB/login/code',
    });
  }
</script>

<style scoped lang="scss">
  .page {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    box-sizing: border-box;
    padding-top: 201rpx;
    background-color: #f4f5f7;
    box-sizing: border-box;

    .logo {
      text-align: center;
      margin-bottom: 73rpx;
      .img {
        width: 428rpx;
        height: 101rpx;
        vertical-align: middle;
      }
    }
  }

  .uni-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 24rpx;
    line-height: 40rpx;
    margin-top: 60rpx;

    .check_radio {
      position: relative;
      width: 28rpx;
      height: 28rpx;
      margin-right: 12rpx;
      transform: translateY(8rpx);

      .mock_check_btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50rpx;
        height: 50rpx;
        // background-color: pink;
      }

      .border {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #474747;
        border-radius: 50%;
      }

      .spot {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 28rpx;
        height: 28rpx;
        vertical-align: middle;
      }
    }
    .radioName {
      width: 70%;
      color: #333;
      margin-bottom: 63rpx;

      .link {
        color: #31b432;
      }
    }
  }

  .mock-phone-btn {
    position: absolute;
    width: 657rpx;
    height: 83rpx;
    background-color: transparent;
    margin: 0 auto;
    text-align: center;
    margin-top: 30rpx;
    border-radius: 8rpx;

    margin-left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin-top: 30rpx;
  }

  .get-phone-btn {
    width: 657rpx;
    height: 83rpx;
    line-height: 83rpx;
    border-radius: 10rpx;
    border: 2rpx solid #cecece;
    margin-top: 30rpx;
    font-size: 30rpx;
    color: #444444;
  }

  .get-code-btn {
    width: 657rpx;
    height: 83rpx;
    background-color: #31b432;
    line-height: 83rpx;
    margin: 0 auto;
    text-align: center;
    margin-top: 30rpx;
    border-radius: 8rpx;
    font-size: 30rpx;
    color: #ffffff;
  }

  // todo 临时隐藏
  .get-home-btn {
    display: none;
    position: fixed;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 657rpx;
    height: 83rpx;
    line-height: 83rpx;
    border-radius: 10rpx;
    border: 2rpx solid #cecece;
    margin-top: 30rpx;
    font-size: 30rpx;
    color: #444444;
  }
</style>
